import React from 'react';
import { Layout, Row, Col } from 'antd';
import { FileImageOutlined, BarChartOutlined, ExperimentOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Card } from '../../components/common/Card';
import './LabPage.css';

const { Content } = Layout;

export const LabPage: React.FC = () => {
  const navigate = useNavigate();

  const labFeatures = [
    {
      key: 'wine-menu-generator',
      icon: <FileImageOutlined />,
      title: '酒单生成器',
      description: '可视化搭建酒单图片，支持自定义布局、字体、颜色等配置',
      onClick: () => navigate('/lab/wine-menu-generator'),
      colorClass: 'wine',
      status: 'active'
    },
    {
      key: 'data-analysis',
      icon: <BarChartOutlined />,
      title: '数据分析',
      description: '销售数据分析、用户行为分析等功能',
      onClick: () => {},
      colorClass: 'analysis',
      status: 'coming-soon'
    },
    {
      key: 'ai-assistant',
      icon: <ExperimentOutlined />,
      title: 'AI 助手',
      description: '智能推荐、自动化运营等AI功能',
      onClick: () => {},
      colorClass: 'ai',
      status: 'coming-soon'
    }
  ];

  return (
    <Layout className="lab-layout">
      <Content className="lab-content">
        <div className="lab-container">
          <div className="lab-header">
            <h1 className="lab-title">
              <ExperimentOutlined className="lab-title-icon" />
              实验室
            </h1>
            <p className="lab-subtitle">探索创新功能，提升运营效率</p>
          </div>
          
          <Row gutter={[24, 24]} className="lab-grid">
            {labFeatures.map(feature => (
              <Col xs={24} sm={12} lg={8} key={feature.key}>
                <Card 
                  onClick={feature.status === 'active' ? feature.onClick : undefined}
                  className={`lab-feature-card lab-feature-${feature.colorClass} ${
                    feature.status === 'coming-soon' ? 'coming-soon' : ''
                  }`}
                >
                  <div className="lab-card-content">
                    <div className={`lab-card-icon icon-${feature.colorClass}`}>
                      {feature.icon}
                    </div>
                    <div className="lab-card-text">
                      <h3 className="lab-card-title">
                        {feature.title}
                        {feature.status === 'coming-soon' && (
                          <span className="coming-soon-badge">即将推出</span>
                        )}
                      </h3>
                      <p className="lab-card-description">{feature.description}</p>
                    </div>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </Content>
    </Layout>
  );
};

export default LabPage; 